<template>
	<section>
			<!--表单查询-->
			<xietong-from1 @onSubmit="onSubmit" :componentType="componentType" :waitType="waitType"></xietong-from1>
			<!--表格展示-->
			<xietong-table @gotoPage = "gotoPage" class='xie_tong_table' :pageSize="pageSize" :pageTotal="pageTotal" :type="componentType" :tableData="tableData" :labelList = 'labelList' @checkView = "checkView"></xietong-table>
			<!--工单详情-->
			<el-dialog title="工单详情" :visible.sync="dialogTableVisible" :modal=false>
		  		<xietong-detail  @refresh = 'refresh'  @closeDialog = "closeDialog" :formId = "formId" :taskId='taskId'  :type="componentType"></xietong-detail>
				
			</el-dialog>
	</section>
</template>

<script>
	import xietongTable from '../comment/xietongTable';
	import xietongFrom1 from '../comment/xietongFrom1';
	import xietongDetail from '../comment/xietongDetail';
	import {apiWaitDanList,apiLogin} from '../css_img_js/xieTongApi.js'
	export default{
		components:{
			xietongTable,
			xietongFrom1,
			xietongDetail,
		},
		data(){
			return{
				componentType:'waitdan',
					waitType:[
				    	{
				    		name:'待分发',
				    		val:'daifenfa',
				    	},
				    	{
				    		name:'待反馈',
				    		val:'daifankui',
				    	},
				    	{
				    		name:'待签收',
				    		val:'daiqianshou',
				    	},
				    	{
				    		name:'待审核',
				    		val:'daishenpi',
				    	},
				    	{
				    		name:'待办结',
				    		val:'daibanjie',
				    	},
				    	{
				    		name:'待评价',
				    		val:'daipingjia',
				    	},
				    	{
				    		name:'全部',
				    		val:7,
				    	},
				    ],
				 formDetail:{
			    	applyPerson:'',
			    	applyThing:'',
			    	applyTime:['',''],
			    	waitType:'',
			      },
				  pageSize:10,/*每页*/
			      pageTotal:0,/*总数*/
			   	  pageNum:0,/*当前页*/
				  tableData: [],
			      labelList : {
				        title : '申请事项',
				        applyName : '申请人员',
				        applyDate : '申请时间',
				        upLevelPerson : '上级处理人员',
				        createTime : '到达时间',
				        waitType : '当前状态',
				        delLastTime : '处理期限',
				    },
			      dialogTableVisible:false,
			      innerVisible:false,
			      formId:0,
			      taskId:0,
			      loading:'',
			}
		},
		methods:{
			checkView(val){/*打开弹窗*/
				console.log(val);
				this.formId = val.formId;/*当前详情的id*/
				this.taskId = val.taskId;/*当前详情提交的id*/
				this.dialogTableVisible = true;
			},
			closeDialog(){/*关闭弹窗*/
				this.dialogTableVisible = false;
			},
			refresh(){/*刷新*/
				location.reload();
			},
			getList(){/*获取数据*/
				this.showLoading();
				apiWaitDanList(this,this.formDetail).then(()=>{
					this.closeLoading();
				})
			},
			showLoading(){/*显示loading*/
				this.loading = this.$loading({
			      text: '加载中',
			      target: document.querySelector('.xie_tong_table')
			    });
			},
			closeLoading(){/*关闭loading*/
				this.loading.close();
			},
			onSubmit(val){/*提交查询*/
				console.log(val);
				if(val.waitType === 7){
					this.formDetail.waitType="";
					this.getList();
				}else{
					this.formDetail = val;
					this.getList();
				}
				
			},
			gotoPage(val){/*跳页*/
				this.pageNum = (val-1)*this.pageSize;
				this.getList();
			}
				
		},
		mounted(){
				this.getList();
		}
	}
</script>

<style scoped>
	.el-date-editor .el-range-separator{
		    width: 7% !important;	
	}
</style>